<template>
    <!-- 将 modal 渲染到id是modal的节点上 -->
    <teleport to='#modal'>
        <div id="center" v-if="isOpen">
            <h2><slot>{{msg}}</slot></h2>
            <button>是</button><button>否</button>
            <div><button @click="onClickClose">关闭</button></div>
        </div>
    </teleport>

</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'Modal',
  props: {
    msg: String,
    isOpen: Boolean
  },
  emits: {
    // 下面是有参数的事件的声明方式
    // 'close':(payload)=>{
    //     return payload.type === 'close';
    // }
    'close':null
  },
  // 第一个参数 props 的原型就是上面的 props
  // 第二个参数等于 vue2 中的 this
  setup(props,context){
    // 下面演示有参数的事件的触发方法
    // 发送名称为 close 的事件，对应上面的 emits 中的 close 事件
    // 但是上面的该事件中要求类型为 close ，下面默认传输人的 type = helloo 不匹配
    // context.emit('close',{
    //   type:'close'
    // })

    const onClickClose = () => {
      context.emit('close');
    }

    return { onClickClose }
  }
});
</script>
<style scoped>
#center {
    width: 200px;
    height: 200px;
    border: 2px solid black;
    background-color: white;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
}
</style>